<template>
	<view>
		<view class="img">
			<view class="search dpflex">
				<i @click="toSearch" class="iconfont icon-sousuo"></i>
					<view class="flex1" @click="toSearch"> 搜索您想要的房源</view>
				<i class="iconfont icon-dingweixiao"></i>
				<view @click="chooseCity">{{cityName}}</view>
			</view>
		</view>
		<!-- 拆分业务组件 列表-->
		<view class="list">
			<view class="title">
				猜你喜欢
			</view>
			<view  v-for="item in houseList" :key="item.id">
				<house-item :item="item"></house-item>
				   
				   
				   
				   
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getHouseList
	} from '@/api/home.js'
	import HouseItem from '@/components/house-item/house-item.vue'
	export default {
		data() {
			return {
				// city:'北京'
				pageData: {
					page: 1,
					pagesize: 10
				},
				houseList: []
			};
		},
		components:{
			HouseItem
		},
		created() {
			// #ifdef MP
			this.getCity()
			// #endif	
			// 请求推荐房源列表
			this.getHouse()
		},
		methods: {
			...mapMutations(['changeCity']),
			chooseCity() {
				// #ifdef H5 ||APP 
				uni.navigateTo({
					url: '/pages/home/city'
				})
				// #endif
				
				// #ifdef MP 
					// 小程序 点击位置 直接跳转到  地图页面
					uni.navigateTo({
						url:'/pages/home/address'
					})
				// #endif
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/search'
				})
			},
			getCity() {
				let _this = this;
				uni.getLocation({
					success(res) {

						//调用逆地址解析--获取中文  ZLKBZ-OLRHN-WCEFI-SSQJ2-ISZ67-63BCY
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							method: 'get',
							data: {
								key: 'ZLKBZ-OLRHN-WCEFI-SSQJ2-ISZ67-63BCY',
								location: `${res.latitude},${res.longitude}`
							},
							success(res) {
								//?
								let city = res.data.result.address_component.city;
								_this.changeCity(city)

							}
						})

					},
				})
			},

			async getHouse() {
				let res = await getHouseList(this.pageData)

				// 拿到房源列表处理每个房源的 tabs 转换为数组
				res.data.forEach(item => {
					item.tabs = JSON.parse(item.tabs.replace(/'/g, '"'));
				})

				this.houseList.push(...res.data)
			},
		
	
	
	
		},
		computed: {
			...mapState(['cityName'])
			// city(){
			//  return  this.$store.state.cityName;
			// }
		},
		// 上拉触底 执行的生命周期--数据的分页--数据的懒加载
		onReachBottom() {
			this.pageData.page++;
			this.getHouse()
		}



	}
</script>

<style lang="scss" scoped>
	.img {
		width: 750rpx;
		height: 258rpx;
		padding-top: 17rpx;
		background: #ff4100;
	}

	.search {
		width: 618rpx;
		height: 40rpx;
		padding: 20rpx;
		background: rgba(255, 255, 255, .8);
		border-radius: 15rpx;
		margin: 0 auto;

	}

	.list {
		width: 90%;
		margin: 0 auto;
	}

	
</style>